import React, {useEffect, useRef, useState} from "react";
import {PlusOutlined, UploadOutlined} from "@ant-design/icons";
import {
    Button, Cascader, Input, Table, Pagination, ConfigProvider, Space, Col, Row, Modal, message, Upload, Select, Form,
} from "antd";
import zhCN from "antd/lib/locale/zh_CN";
import "./spliebiao.css";
import service from "../../../service";
import TextArea from "antd/es/input/TextArea";

const Spliebiao = () => {
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [loading, setLoading] = useState(false);
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isModalVisiblep, setIsModalVisiblep] = useState(false);
    const [isModalVisibleps, setIsModalVisibleps] = useState(false);
    const [isModalVisiblepx, setIsModalVisiblepx] = useState(false);
    const [isModalVisiblepxs, setIsModalVisiblepxs] = useState(false);
    const [isModalVisiblepxz, setIsModalVisiblepxz] = useState(false);
    const [isModalVisiblepxsc, setIsModalVisiblepxsc] = useState(false);
    const [isModalVisibleq, setIsModalVisibleq] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    const showModalq = () => {
        setIsModalVisibleq(true);
    };
    const handleOkq = () => {
        setIsModalVisibleq(false);
    };
    const handleCancelq = () => {
        setIsModalVisibleq(false);
    };
    const showModalp = () => {
        setIsModalVisiblep(true);
    };
    const handleOkp = () => {
        setIsModalVisiblep(false);
    };
    const handleCancelp = () => {
        setIsModalVisiblep(false);
    };
    const handleOkps = () => {
        setIsModalVisibleps(false);
    };
    const handleCancelps = () => {
        setIsModalVisibleps(false);
    };
    const showModalpx = () => {
        setIsModalVisiblepx(true);
    };
    const handleCancelpx = () => {
        setIsModalVisiblepx(false);
    };
    const handleCancelpxs = () => {
        setIsModalVisiblepxs(false);
    };
    const handleCancelpxz = () => {
        setIsModalVisiblepxz(false);
    };
    const handleCancelpxsc = () => {
        setIsModalVisiblepxsc(false);
    };
    const start = () => {
        setLoading(true); // ajax request after empty completing
        setTimeout(() => {
            setSelectedRowKeys([]);
            setLoading(false);
        }, 1000);
    };


    const onSelectChange = (newSelectedRowKeys) => {
        setSelectedRowKeys(newSelectedRowKeys);
        console.log("selectedRowKeys changed: ", selectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys, onChange: onSelectChange,
    };
    const props = {
        name: "file", action: "https://www.mocky.io/v2/5cc8019d300000980a055e76", headers: {
            authorization: "authorization-text",
        },

        onChange(info) {
            if (info.file.status !== "uploading") {
                console.log(info.file, info.fileList);
            }

            if (info.file.status === "done") {
                message.success(`${info.file.name} 上传成功`);
            } else if (info.file.status === "error") {
                message.error(`${info.file.name} 上传失败`);
            }
        },
    };

    const hasSelected = selectedRowKeys.length > 0;

    const options = [{
        value: "zhejiang", label: "Zhejiang", children: [{
            value: "hangzhou", label: "Hanzhou", children: [{
                value: "xihu", label: "West Lake",
            },],
        },],
    }, {
        value: "jiangsu", label: "Jiangsu", children: [{
            value: "nanjing", label: "Nanjing", children: [{
                value: "zhonghuamen", label: "Zhong Hua Men",
            },],
        },],
    },];

    const onChange1 = (value) => {
        console.log(value);
    };

    //商品列表
    const goodsColumns = [{
        title: "排序", dataIndex: "sorting", key: "sorting", className: "bgColor",
    }, {
        title: "商品大类", dataIndex: "name1", key: "name1", className: "bgColor",
    }, {
        title: "商品小类", dataIndex: "name2", key: "name2", className: "bgColor",
    }, {
        title: "商品名称", dataIndex: "name_of_commodity", key: "name_of_commodity", className: "bgColor",
    }, {
        title: "商品图", dataIndex: "commodity_figure", key: "commodity_figure", className: "bgColor",
    }, {
        title: "规格", dataIndex: "specifications", key: "specifications", className: "bgColor",
    }, {
        title: "型号", dataIndex: "model", key: "model", className: "bgColor",
    }, {
        title: "商品库存", dataIndex: "inventory", key: "inventory", className: "bgColor",
    }, {
        title: "库存状态", dataIndex: "inventory_status", key: "inventory_status", className: "bgColor",
    }, {
        title: "成本", dataIndex: "cost", key: "cost", className: "bgColor",
    }, {
        title: "售价", dataIndex: "price", key: "price", className: "bgColor",
    }, {
        title: "商品备注", dataIndex: "commodity_note", key: "commodity_note", className: "bgColor",
    }, {
        title: "管理", key: "action", className: "bgColor", render: (record) => (<Space size="middle">
            <Button type="primary" size="small" style={{borderRadius: "5px"}} onClick={showModalq}>修改</Button>
            <Button type="primary" danger size="small" style={{borderRadius: "5px"}}
                    onClick={() => handleDelGoods(record)}>删除</Button>
        </Space>),
    },];
    const [goodsList, setGoodsList] = useState([]);//商品列表
    const [total, setTotal] = useState(0)
    const [currentPage, setCurrentPage] = useState(1)
    const [pageSize, setPageSize] = useState(10);
    const [bigClass, setBigClass] = useState([]);
    const [smallClass, setSmallClass] = useState([]);
    const [formAddGoods] = Form.useForm();//新增商品表单
    const addBigClassRef = useRef(null);//新增商品大类
    const [bigClassItem, setBigClassItem] = useState({});//存储编辑的大类
    const [smallClassItem, setSmallClassItem] = useState({});//存储编辑的小类
    const updateBigClassRef = useRef(null);//编辑商品大类
    const addSmallClassRef = useRef(null);//新增小类
    const [bigId, setBigId] = useState("");
    const updateSmallClassRef = useRef(null);//编辑商品大类
    let bigClass_id;//用于添加小类时，存储选择的大类id
    const [searchValue, setSearchValue] = useState({})
    //根据小类进行搜索
    const onChange_smallClass = (value) => {
        console.log(value);
        searchByUser({small_class_goods_id: value[0]})
        setSearchValue({...searchValue, small_class_goods_id: value[0]})
        console.log(searchValue, "obj");
    }
    //根据大类进行搜索
    const onChange_bigClass = (value) => {
        console.log(value);
        getSmallClassList(value[0]);
        searchByUser()
        setSearchValue({...searchValue, product_categories_id: value[0]})
        console.log(searchValue, "大类搜索");
        if(value.length===0){
            getGoodsList(currentPage,pageSize);
        }
    };
    //根据条件进行查询
    const searchByUser = (obj) => {
        service.writeOffService.SEARCH_ByUserInput({currentPage, pageSize, ...obj}
        ).then(data => {
            console.log(data);
            if (data.code === 200) {
                setGoodsList(data.data);
                setTotal(data.count)
            } else {
                message.error("查询失败，请稍后再试")
            }
        }).catch(err => {
            console.log("大类查询出错啦", err);
        })
    }
    //修改小类
    const handle_updateSmallClass = () => {
        console.log(updateSmallClassRef.current.value);
        const name = updateSmallClassRef.current.value;
        if (name) {
            service.writeOffService.UPDATE_SmallClass(smallClassItem.small_class_goods_id, name).then(data => {
                if (data.code === 200) {
                    message.success(data.msg);
                    getSmallClassList(bigId);
                } else {
                    message.error("编辑失败")
                }
            })
            setIsModalVisiblepxsc(false);
        } else {
            message.warning("不能为空")
        }
    }
    //展示小分类编辑模态框
    const show_updateSmallClass = (item) => {
        setSmallClassItem(item)
        setIsModalVisiblepxsc(true);
    };
    //删除小类
    const handle_delSmallClass = (id) => {
        service.writeOffService.DEL_SmallClass(id).then(data => {
            if (data.code === 200) {
                message.success(data.msg);
                getSmallClassList(bigId);
            } else {
                message.error("删除失败")
            }
        })
    }
    //添加小类
    const handle_addSmallClass = () => {
        const name = addSmallClassRef.current.value;
        console.log(bigClass_id, name);
        if (bigClass_id && name) {
            service.writeOffService.ADD_SmallClass(bigClass_id, name).then(data => {
                if (data.code === 200) {
                    message.success(data.msg);
                } else {
                    message.error("添加失败")
                }
            })
            setIsModalVisiblepxz(false);
        } else {
            message.warning("不能为空")
        }
        addSmallClassRef.current.value = "";
    };
    //获取添加小类的大类的id
    const getBigClassValue = (value) => {
        console.log(value);
        bigClass_id = value[0];
    }
    //展示添加小类的模态框
    const show_addSmallClass = () => {
        setIsModalVisiblepxz(true);
    };
    //展示小类
    const show_getSmallClass = (id) => {
        setIsModalVisibleps(true);
        setBigId(id)
        getSmallClassList(id)
    };
    //编辑商品大类
    const handle_updateBigClass = () => {
        const name = updateBigClassRef.current.value.trim();
        console.log(updateBigClassRef.current.value);
        if (name) {
            const obj = {
                name,
                product_categories_id: bigClassItem.product_categories_id
            }
            console.log(obj);
            service.writeOffService.UPDATE_BigClass(obj).then(data => {
                console.log(data);
                if (data.code === 200) {
                    message.success("修改成功");
                    getBigClassList()
                } else {
                    message.error("修改失败")
                }
            })
            setIsModalVisiblepxs(false);
        } else {
            message.warning("不能为空")
        }
    };
    //展示编辑商品大类的模态框
    const show_updateBigClass = (item) => {
        setBigClassItem(item);
        setIsModalVisiblepxs(true);
    };
    //删除商品大类
    const delBigClass = (id) => {
        console.log(id);
        service.writeOffService.DEL_BigClass(id).then(data => {
            console.log(data);
            if (data.code === 200) {
                message.success(data.msg);
                getBigClassList();
            } else if (data.code === 500) {
                message.warning(data.msg)
            } else {
                message.error("删除失败")
            }
        })
    }
    //新增商品大类
    const handle_addBigClass = () => {
        console.log(addBigClassRef.current.value);
        if (addBigClassRef.current.value.trim()) {
            service.writeOffService.ADD_BigClass(addBigClassRef.current.value).then(data => {
                if (data.code === 200) {
                    message.success(data.msg);
                    getBigClassList();
                } else {
                    message.error("添加失败")
                }
            }).catch(err => {
                console.log("添加商品大类失败", err);
            })
            setIsModalVisiblepx(false);
        } else {
            message.warning("名称不能为空")
        }
    };
    //添加商品
    const handleOk_AddGoods = async () => {
        const fieldsValue = await formAddGoods.validateFields();
        const addValue = {
            ...fieldsValue,
            product_categories_id: fieldsValue.product_categories_id[0],
            small_class_goods_id: fieldsValue.small_class_goods_id[0]
        }
        service.writeOffService.ADD_Goods(addValue).then(data => {
            if (data.code === 200) {
                message.success(data.msg);
                getGoodsList(currentPage, pageSize)
            } else {
                message.error("添加失败")
            }
        }).catch(err => {
            console.log("添加商品失败了", err);
        })
        setIsModalVisible(false);
    };
    //删除商品
    const handleDelGoods = (record) => {
        console.log(record);
        service.writeOffService.DEL_GoodsList(record.goods_id).then(data => {
            console.log(data);
            if (data.code === 200) {
                message.success(data.msg);
                getGoodsList(currentPage, pageSize)
            } else {
                message.error("删除失败")
            }
        }).catch(err => {
            console.log("删除商品出错啦", err);
        })
    }
    //获取商品列表
    const getGoodsList = (currentPage, pageSize) => {
        service.writeOffService.GET_GoodsList(currentPage, pageSize).then(data => {
            console.log("商品列表", data);
            if (data.code === 200) {
                setTotal(data.count);
                setGoodsList(data.data)
            }
        }).catch(err => {
            console.log("商品列表出错了", err);
        })
    }
    //获取商品大类
    const getBigClassList = () => {
        service.writeOffService.GET_BigClass().then(data => {
            console.log("大类", data);
            if (data.code === 200) {
                setBigClass(data.data)
            }
        }).catch(err => {
            console.log("大类出错了", err);
        })
    }
    //绑定大类
    const bindBigClass = () => {
        let arr = [];
        bigClass.map((item) => {
            arr.push({
                value: item.product_categories_id,
                label: item.name, // children: bindSmallClass(item.product_categories_id)
            })
        })
        return arr
    }
    //获取大类的值
    const onChangeBigClass = (id) => {
        console.log("获取大类的值", id);
        setSmallClass([])
        if (id.length == 1) {
            getSmallClassList(id[0])
        }
    }
    //绑定商品小类
    const bindSmallClass = () => {
        let arr1 = [];
        smallClass.map(item => {
            arr1.push({
                value: item.small_class_goods_id, label: item.name
            })
        });
        return arr1
    }
    //获取商品小类
    const getSmallClassList = (product_categories_id) => {
        service.writeOffService.GET_SmallClass(product_categories_id).then(data => {
            console.log("小类", data);
            if (data.code === 200) {
                setSmallClass(data.data);
            }
        }).catch(err => {
            console.log("小类出错了", err);
        })
    }
    //获取页码和每页展示条数
    const changPage = (page, size) => {
        setCurrentPage(page);
        setPageSize(size);
    }

    useEffect(() => {
        getGoodsList(currentPage, pageSize);
        getBigClassList();
    }, [currentPage, pageSize])

    return (<div className="waiwei">
        <div className="button1">
            <Button type="primary" className="sysp">
                所有商品
            </Button>
            <Button type="primary" className="spfl" onClick={showModalp}>
                商品分类
            </Button>
            <Button type="primary" className="spdr">
                商品导入
            </Button>
            <Button type="primary" className="xzsp" onClick={showModal}>
                新增商品
            </Button>
        </div>
        <div className="sousuo1">
            按分类筛选:
            <Cascader options={bindBigClass()} onChange={onChange_bigClass} changeOnSelect/>
            <Cascader options={bindSmallClass()} onChange={onChange_smallClass} changeOnSelect/>
            商品名称:
            <Input placeholder=""/>
            规格:
            <Input placeholder=""/>
            型号:
            <Input placeholder=""/>
            <Button type="primary" size="small" className="ljss">
                立即搜索
            </Button>
            <Button type="primary" size="small" className="qktj">
                清空条件
            </Button>
        </div>
        {/*商品列表*/}
        <div>
            <Table
                rowSelection={rowSelection}
                columns={goodsColumns}
                dataSource={goodsList}
                rowKey={record => record.goods_id}
                pagination={false}
            />
            <div className="dibu">
                您可以讲选中信息
                <Button
                    type="primary"
                    onClick={start}
                    disabled={!hasSelected}
                    loading={loading}
                    className="plsc"
                >
                    批量删除
                </Button>
                <ConfigProvider locale={zhCN}>
                    <Pagination
                        className="GetPages"
                        total={total}
                        onChange={changPage}
                        showSizeChanger
                        showQuickJumper
                        showTotal={(total) => `总共 ${Math.ceil(total / pageSize)} 页`}
                    />
                </ConfigProvider>
            </div>
        </div>
        {/*新增商品*/}
        <Modal
            title="新增商品"
            visible={isModalVisible}
            onOk={handleOk_AddGoods}
            onCancel={handleCancel}
            className="spxgg"
        >
            <Form
                wrapperCol={{
                    span: 14,
                }}
                layout="horizontal"
                form={formAddGoods}
            >

                <div style={{display: "flex"}}>
                    <Form.Item label="商品分类" name="product_categories_id"
                               style={{width: "40%"}}
                               rules={[{
                                   required: true, message: '请选中商品大类',
                               },]}>
                        <Cascader
                            options={bindBigClass()}
                            onChange={onChangeBigClass}
                        />
                    </Form.Item>
                    <Form.Item name="small_class_goods_id" style={{width: "40%"}} rules={[{
                        required: true, message: '请选中商品小类',
                    },]}>
                        <Cascader
                            options={bindSmallClass()}
                        />
                    </Form.Item>
                </div>
                <Form.Item label="商品名称" name="name_of_commodity" rules={[{
                    required: true, message: '请输入商品名称',
                },]}>
                    <Input/>
                </Form.Item>

                <Form.Item label="商品图" valuePropName="fileList">
                    <Upload action="/upload.do" listType="picture-card">
                        <div>
                            <PlusOutlined/>
                            <div
                                style={{
                                    marginTop: 8,
                                }}
                            >
                                上传文件
                            </div>
                        </div>
                    </Upload>
                </Form.Item>
                <Form.Item label="规格" name="specifications">
                    <Input/>
                </Form.Item>
                <Form.Item label="型号" name="model">
                    <Input/>
                </Form.Item>
                <Form.Item label="商品库存" name="inventory" rules={[{
                    required: true, message: '请输入商品库存',
                },]}>
                    <Input/>
                </Form.Item>
                <div style={{display: "flex"}}>
                    <Form.Item label="当前商低于" name="inventory_warning" rules={[{
                        required: true, message: '请输入预警值',
                    },]}>
                        <Input/>
                    </Form.Item>
                    <span>时警告!</span>
                </div>
                <div style={{display: "flex"}}>
                    <Form.Item label="成本" name="cost" rules={[{
                        required: true, message: '请输入成本',
                    },]}>
                        <Input/>
                    </Form.Item>
                    <span>元</span>
                </div>
                <div style={{display: "flex"}}>
                    <Form.Item label="售价" name="price" rules={[{
                        required: true, message: '请输入售价',
                    },]}>
                        <Input/>
                    </Form.Item>
                    <span>元</span>
                </div>
                <Form.Item label="商品备注" name="commodity_note">
                    <TextArea rows={4}/>
                </Form.Item>
                <div style={{display: "flex"}}>
                    <Form.Item label="商品排序" name="sorting" rules={[{
                        required: true, message: '请输入商品排序',
                    },]}>
                        <Input/>
                    </Form.Item>
                    <span>默认100,越小越靠前</span>
                </div>
            </Form>
        </Modal>
        {/*展示商品大分类*/}
        <Modal
            title="商品分类"
            visible={isModalVisiblep}
            onOk={handleOkp}
            onCancel={handleCancelp}
        >
            <Button onClick={showModalpx}>新增大类</Button>
            <table border={1}>
                <thead>
                <tr>
                    <th>分类标题</th>
                    <th>操作</th>
                </tr>
                </thead>
                {bigClass.map((item, index) => {
                    return (<tbody key={item.product_categories_id}>
                    <tr>
                        <td onClick={() => show_getSmallClass(item.product_categories_id)}>{item.name}</td>
                        <td>
                            <Space size="middle">
                                <Button type="primary" size="small" style={{borderRadius: "5px"}}
                                        onClick={show_addSmallClass}>新增</Button>
                                <Button type="primary" size="small" style={{borderRadius: "5px"}}
                                        onClick={() => show_updateBigClass(item)}>修改</Button>
                                <Button type="primary" danger size="small" style={{borderRadius: "5px"}}
                                        onClick={() => delBigClass(item.product_categories_id)}>删除</Button>
                            </Space>
                        </td>
                    </tr>
                    </tbody>);
                })}
            </table>
        </Modal>
        {/*展示商品小分类*/}
        <Modal
            title="商品小分类"
            visible={isModalVisibleps}
            onOk={handleOkps}
            onCancel={handleCancelps}
        >
            <table border={1}>
                <thead>
                <tr>
                    <th>分类标题</th>
                    <th>操作</th>
                </tr>
                </thead>
                {smallClass.map((item, index) => {
                    return (<tbody key={item.small_class_goods_id}>
                    <tr>
                        <td>{item.name}</td>
                        <td>
                            <Space size="middle">
                                <Button type="primary" size="small" style={{borderRadius: "5px"}}
                                        onClick={() => show_updateSmallClass(item)}>修改</Button>
                                <Button type="primary" danger size="small" style={{borderRadius: "5px"}}
                                        onClick={() => handle_delSmallClass(item.small_class_goods_id)}>删除</Button>
                            </Space>
                        </td>
                    </tr>
                    </tbody>);
                })}
            </table>
        </Modal>
        {/*新增商品大类*/}
        <Modal
            title="新增分类"
            visible={isModalVisiblepx}
            onOk={handle_addBigClass}
            onCancel={handleCancelpx}
        >
            <div id="tjflmod">
                <ul>
                    <li style={{display: "flex"}}>
                        <span className="flone">添加分类名称</span>
                    </li>
                    <li style={{display: "flex"}}>
                        <span>分类名称</span>
                        <span>
                <input type="text" ref={addBigClassRef}/>
              </span>
                    </li>
                </ul>
            </div>
        </Modal>
        {/*修改商品大类*/}
        <Modal
            title="修改分类"
            visible={isModalVisiblepxs}
            onOk={handle_updateBigClass}
            onCancel={handleCancelpxs}
        >
            <div id="tjflmod">
                <ul>
                    <li style={{display: "flex"}}>
                        <span className="flone">修改分类名称</span>
                    </li>
                    <li style={{display: "flex"}}>
                        <span>分类名称</span>
                        <span>
                <input type="text" defaultValue={bigClassItem.name} ref={updateBigClassRef}/>
              </span>
                    </li>
                </ul>
            </div>
        </Modal>

        {/*添加小类*/}
        <Modal
            title="新增小分类"
            visible={isModalVisiblepxz}
            onOk={handle_addSmallClass}
            onCancel={handleCancelpxz}
        >
            <div id="tjflmod">
                <ul>
                    <li style={{display: "flex"}}>
                        <span className="flone">新增小分类名称</span>
                    </li>
                    <li style={{display: "flex"}}>
                        <span>分类名称</span>
                        <Cascader options={bindBigClass()} onChange={getBigClassValue} placeholder="请选择"/>
                    </li>
                    <li style={{display: "flex"}}>
                        <span>分类名称</span>
                        <span>
                <input type="text" ref={addSmallClassRef}/>
              </span>
                    </li>
                </ul>
            </div>
        </Modal>
        {/*修改商品小分类*/}
        <Modal
            title="修改小分类"
            visible={isModalVisiblepxsc}
            onOk={handle_updateSmallClass}
            onCancel={handleCancelpxsc}
        >
            <div id="tjflmod">
                <ul>
                    <li style={{display: "flex"}}>
                        <span className="flone">修改小分类名称</span>
                    </li>
                    <li style={{display: "flex"}}>
                        <span>分类名称</span>
                        <span>
                <input type="text" ref={updateSmallClassRef} defaultValue={smallClassItem.name}/>
              </span>
                    </li>
                </ul>
            </div>
        </Modal>

        {/*修改商品*/}
        <Modal
            title="修改商品"
            visible={isModalVisibleq}
            onOk={handleOkq}
            onCancel={handleCancelq}
            className="spxgg"
        >
            <div id="splbmod">
                <ul>
                    <li style={{display: "flex"}}>
                        <span>商品分类</span>
                        <span className="splb">
                <Cascader
                    options={options}
                    onChange={onChange1}
                    changeOnSelect
                />
              </span>
                    </li>
                    <li style={{display: "flex"}}>
                        <span>商品名称</span>
                        <span>
                <input type="text"/>
              </span>
                    </li>
                    <li style={{display: "flex"}}>
                        <span>商品图</span>
                        <span>
                <Upload {...props}>
                  <Button icon={<UploadOutlined/>}>上传文件</Button>
                </Upload>
              </span>
                    </li>
                    <li style={{display: "flex"}}>
                        <span>规格</span>
                        <span>
                <input type="text"/>
              </span>
                    </li>
                    <li style={{display: "flex"}}>
                        <span>型号</span>
                        <span>
                <input type="text"/>
              </span>
                    </li>
                    <li style={{display: "flex"}}>
                        <span>商品库存</span>
                        <span className="splbinps">
                <input type="text" className="splbinp"/>
                <span className="splbinpss">当商品库存低于</span>
              </span>
                        <span className="splbinps">
                <input type="text" className="splbinp"/>
                <span className="splbinpss">时警告</span>
              </span>
                    </li>
                    <li style={{display: "flex"}}>
                        <span>成本</span>
                        <span>
                <input type="text"/>
              </span>
                    </li>
                    <li style={{display: "flex"}}>
                        <span>售价</span>
                        <span>
                <input type="text"/>
              </span>
                    </li>
                    <li className="spbzbli" style={{display: "flex"}}>
                        <span>商品备注</span>
                        <span>
                <textarea className="spbzb"></textarea>
              </span>
                    </li>
                    <li style={{display: "flex"}}>
                        <span>商品排序</span>
                        <span>
                <input type="text"/>
              </span>
                    </li>
                </ul>
            </div>
        </Modal>
    </div>);
};
export default Spliebiao;
